<template>
	<view class="recommended-item">
		<view class="recommended-item-img" :style="{backgroundColor:recommendeItem.bgColor}">
			<image :src="recommendeItem.img" mode=""></image>
		</view>
		<view class="recommended-item-title"><text>{{recommendeItem.title}}</text></view>
		<view class="recommended-item-description"><text>{{recommendeItem.description}}</text></view>
		<view class="recommended-item-look">
		   <image src="../../static/imgs/eyes.svg" mode=""></image>
		   <text>{{recommendeItem.look}}</text>
		</view>
		<view class="add"><image src="../../static/imgs/add.svg"></image></view>
	</view>
</template>

<script>
	export default {
		name:"recommendedItem",
		data() {
			return {
				
			};
		},
		props:['recommendeItem']
	}
</script>

<style scoped lang="scss">
.recommended-item{
	position: relative;
	min-width: 220rpx;
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	align-items: center;
	box-shadow: 0 6rpx 8rpx 0 rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	
	.recommended-item-img{
		width: 85rpx;
		height: 85rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
		
		image{
			width: 40rpx;
			height: 40rpx;
	
		}
	}
	
	.recommended-item-title{
		margin-top: 10rpx;
		line-height: 15rpx;
		text{
			font-size: 20rpx;
		}
	}
	
	.recommended-item-description{		
		margin-bottom: 10rpx;
		text{
			font-size: 16rpx;
			color: #868686;
		}
	}
	
	.recommended-item-look{
		margin-bottom: 20rpx;
		background-color: #f5f5f5;
		padding: 5rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		
		image{
			width: 28rpx;
			height: 28rpx;
		}
		
		text{
			font-size: 16rpx;
			color: #b4b4b4;
		}
	}
	
	.add{
		image{
			width: 32rpx;
			height: 32rpx;
		}
	}
}	
	
	

</style>